layui.use(['layer'], function() {
    var $ = layui.jquery;
    let consumeall = {};
    $.ajax({
		url: '/h/ajax/consumeall',
		dataType: 'json',
		type: 'POST',
		success: function(res) {
			if (res.code == 200) {
				consumeall = res.data;
				data(consumeall);
			}
		},
		error:function(){
		
			return false;
		}
	});

	function data(consumeall){
	    [
            'todaymoney', 'todayorder', 'todaysuccessRate', 'PayAllMoney',
            'todayPayAllMoney', 'todayOrderTotal', 'lastsuccessRate',
            'AllMoney', 'falseMoney', 'samemoney', 'sameRate', 'sameorder'
        ].forEach(key => {
            $(`#${key}`).text(consumeall[key]);
        });

    	    // 图表主题色
        var colors = ['#37A2FF', '#FF0087', '#FFBF00', '#56D0E3', '#9FE6B8', '#FFDB5C'];
        
        // 支付趋势折线图
        var lineChart = echarts.init(document.getElementById('lineChart'));
        var lineOption = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.2)'
                    }
                },
                axisLabel: {
                    color: 'rgba(255,255,255,0.7)'
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLabel: {
                    color: 'rgba(255,255,255,0.7)'
                }
            },
            series: [{
                name: '支付金额',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                    color: '#37A2FF',
                    width: 4
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(55,162,255,0.5)'
                    }, {
                        offset: 1,
                        color: 'rgba(55,162,255,0.1)'
                    }])
                },
                data: consumeall.dayOfWeekarr
            }]
        };
        lineChart.setOption(lineOption);

        // 支付方式饼图 - 优化版本
        var paymentMethods = echarts.init(document.getElementById('paymentMethods'));
        var paymentMethodsOption = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    // 自定义提示框内容
                    return `${params.name}<br/>金额：${params.value}`;
                }
            },
            legend: {
                orient: 'vertical',
                right: '5%',
                top: 'center',
                textStyle: {
                    color: 'rgba(255,255,255,0.7)'
                },
                formatter: function(name) {
                    // 查找对应的数据项
                    var data = paymentMethodsOption.series[0].data;
                    var total = data.reduce((sum, item) => sum + item.value, 0);
                    var tarValue = data.filter(item => item.name === name)[0].value;
                    var percentage = ((tarValue / total) * 100).toFixed(2);
                    // 返回图例文本
                    return `${name}`;
                }
            },
            series: [{
                name: '支付方式',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['40%', '50%'],
                avoidLabelOverlap: true,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: 'rgba(255,255,255,0.1)',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    position: 'outside',
                    formatter: function(params) {
                        return params.name;
                    },
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 12
                },
                labelLine: {
                    show: true,
                    length: 15,
                    length2: 10,
                    smooth: true
                },
                data: consumeall.typemoney,
                // 数据排序
                sort: function (a, b) {
                    return a.value - b.value;
                }
            }]
        };
        
        // 设置配置项
        paymentMethods.setOption(paymentMethodsOption);
        
    
        // 热门商品排行
        var topProducts = echarts.init(document.getElementById('topProducts'));
        
        // 定义10个渐变色
        var gradientColors = [
            {
                start: '#ff9a9e',
                end: '#fad0c4'
            },
            {
                start: '#a18cd1',
                end: '#fbc2eb'
            },
            {
                start: '#84fab0',
                end: '#8fd3f4'
            },
            {
                start: '#fad0c4',
                end: '#ffd1ff'
            },
            {
                start: '#f6d365',
                end: '#fda085'
            },
            {
                start: '#5ee7df',
                end: '#b490ca'
            },
            {
                start: '#d4fc79',
                end: '#96e6a1'
            },
            {
                start: '#cd9cf2',
                end: '#f6f3ff'
            },
            {
                start: '#f093fb',
                end: '#f5576c'
            },
            {
                start: '#4facfe',
                end: '#00f2fe'
            }
        ];
        
        var topProductsOption = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisTick: {show: false},
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.2)'
                    }
                },
                axisLabel: {
                    color: 'rgba(255,255,255,0.7)'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: consumeall.pidarr,
                axisTick: {show: false},
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.2)'
                    }
                },
                axisLabel: {
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 12,
                    margin: 20
                }
            },
            series: [{
                name: '收款金额',
                type: 'bar',
                data: consumeall.moneyarr,
                barWidth: '60%', // 控制柱状图宽度
                itemStyle: {
                    borderRadius: [0, 4, 4, 0],
                    color: function(params) {
                        // 创建线性渐变
                        return new echarts.graphic.LinearGradient(
                            0, 0, 1, 0, // 从左到右的渐变
                            [
                                {
                                    offset: 0,
                                    color: gradientColors[params.dataIndex].start
                                },
                                {
                                    offset: 1,
                                    color: gradientColors[params.dataIndex].end
                                }
                            ]
                        );
                    }
                },
                label: {
                    show: true,
                    position: 'right',
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 12,
                    formatter: function(params) {
                        return params.value.toLocaleString(); // 数字格式化
                    }
                },
                emphasis: {
                    itemStyle: {
                        // 鼠标悬停效果
                        brightness: 0.15
                    }
                },
                animation: true,
                animationDuration: 1500,
                animationEasing: 'cubicOut'
            }]
        };
        // 设置配置项
        topProducts.setOption(topProductsOption);
    
    
        // 窗口大小改变时，重置图表大小
        window.addEventListener('resize', function() {
            lineChart.resize();
            paymentMethods.resize();
            topProducts.resize();
        });
	}
    
});